<template>
  <div class="writing-platform">
    <div class="container">
      <el-button type="primary" :icon="ArrowLeft" @click="$router.go(-1)">返回</el-button>
      <h1>智能写作助手</h1>
      <p>多种体裁，润色校对，一键成文</p>

      <!-- 分类导航 -->
      <div class="category-nav">
        <div v-for="(category, index) in categories" :key="index" class="nav-item"
          :class="{ active: activeCategory === category }" @click="setActiveCategory(category)">
          {{ category }}
        </div>
      </div>

      <!-- 切换内容部分 -->
      <div class="writing-types">
        <div v-for="(type, index) in displayedWritingTypes" :key="index">
          <div class="writing-card" @click="selectWritingType(type)">
            <div class="card-icon" :class="type.iconClass">
              <i :class="type.icon"></i>
            </div>
            <div class="card-content">
              <h3>{{ type.title }}</h3>
              <p>{{ type.description }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 底部输入框 -->
    <div v-if="showCopywritingInput" class="copywriting-input-container">
      <div class="input-box">
        <div class="editable-text">
          <div v-if="!isGenerated">
            <div v-if="currentCategory === 'copywriting'">
              帮我写 5 个面向
              <span class="input-placeholder" contenteditable="true" @input="handleTargetInput" @focus="handleFocus"
                @blur="handleBlur" data-placeholder="人群">
                {{ targetAudience || '人群' }}
              </span>
              宣传
              <span class="input-placeholder" contenteditable="true" @input="handleProductInput" @focus="handleFocus"
                @blur="handleBlur" data-placeholder="产品">
                {{ product || '产品' }}
              </span>
              的品牌营销slogan，简洁吸睛，富有创意。
            </div>
            <div v-if="currentCategory === 'article'">
              我是一个
              <span class="input-placeholder" contenteditable="true" @input="handleBloggerInput" @focus="handleFocus"
                @blur="handleBlur" data-placeholder="博主">
                {{ blogger || '博主' }}
              </span>
              ，请帮我写一篇关于
              <span class="input-placeholder" contenteditable="true" @input="handleBloggerTopicInput"
                @focus="handleFocus" @blur="handleBlur" data-placeholder="主题">
                {{ bloggerTopic || '主题' }}
              </span>
              的文章。
            </div>
            <div v-if="currentCategory === 'composition'">
              写一篇作文，主题为
              <span class="input-placeholder" contenteditable="true" @input="handleTitleInput" @focus="handleFocus"
                @blur="handleBlur" data-placeholder="作文题目">
                {{ title || '【这里输入作文题目】' }}
              </span>
              ，作文水平位
              <span class="input-placeholder" contenteditable="true" @input="handleDegreeInput" @focus="handleFocus"
                @blur="handleBlur" data-placeholder="高中">
                {{ degree || '高中' }}
              </span>
              ，文体是
              <span class="input-placeholder" contenteditable="true" @input="handleStyleInput" @focus="handleFocus"
                @blur="handleBlur" data-placeholder="议论文">
                {{ style || '议论文' }}
              </span>
              。
            </div>
            <div v-if="currentCategory === 'script'">
              我是一名
              <span class="input-placeholder" contenteditable="true" @input="handlePeople1Input" @focus="handleFocus"
                @blur="handleBlur" data-placeholder="打工人">
                {{ people1 || '打工人' }}
              </span>
              ，帮我写一段面向
              <span class="input-placeholder" contenteditable="true" @input="handlePeople2Input" @focus="handleFocus"
                @blur="handleBlur" data-placeholder="陌生同事">
                {{ people2 || '陌生同事' }}
              </span>的话术内容。不要太长，用于
              <span class="input-placeholder" contenteditable="true" @input="handleSceneInput" @focus="handleFocus"
                @blur="handleBlur" data-placeholder="【使用场景】">
                {{ scene || '【使用场景】' }}
              </span>
              。
            </div>
            <div v-if="currentCategory === 'redbook'">
              帮我生成一篇关于
              <span class="input-placeholder" contenteditable="true" @input="handleRedbookTopicInput"
                @focus="handleFocus" @blur="handleBlur" data-placeholder="主题">
                {{ redbookTopic || '主题' }}
              </span>
              的小红书文案。文案需要包含标题和正文标题需根据主题改编为小红书风格，适当使用 emoji 来增强视觉吸引力和情感表达。
            </div>
            <div v-if="currentCategory === 'friend'">
              帮我生成一篇关于
              <span class="input-placeholder" contenteditable="true" @input="handleFriendTopicInput"
                @focus="handleFocus" @blur="handleBlur" data-placeholder="主题">
                {{ friendTopic || '主题' }}
              </span>
              的朋友圈。
            </div>
            <button @click="generateWriting" class="copywriting-button">生成</button>
          </div>

          <div v-if="isGenerated" class="generated-content">
            <h2>生成的内容</h2>
            <p>{{ generatedContent }}</p>
            <button @click="goBack" class="back-button">返回</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from "vue";
import { useRouter } from "vue-router";
import { ArrowLeft } from "@element-plus/icons-vue";
import { generateContent } from "@/api/chat/index.js"; // 导入 generateContent 函数


const router = useRouter();

const writingTypes = [
  {
    title: "宣传文案",
    path: "copywriting",
    showInput: true,
    description: "提写各平台推广文案",
    icon: "el-icon-promotion",
    iconClass: "icon-green",
    category: "营销"
  },
  {
    title: "文章",
    path: "article",
    showInput: true,
    description: "提写各主题长文章",
    icon: "el-icon-document",
    iconClass: "icon-blue",
    category: "写作"
  },
  {
    title: "作文",
    path: "composition",
    showInput: true,
    description: "专为学生打造满分作文",
    icon: "el-icon-edit",
    iconClass: "icon-orange",
    category: "写作"
  },
  {
    title: "话术",
    path: "script",
    showInput: true,
    description: "满足不同场景表达需求",
    icon: "el-icon-chat-dot-round",
    iconClass: "icon-red",
    category: "营销"
  },
  {
    title: "小红书",
    path: "redbook",
    showInput: true,
    description: "打造爆款笔记",
    icon: "el-icon-data-analysis",
    iconClass: "icon-purple",
    category: "社交"
  },
  {
    title: "论文",
    path: "paper",
    description: "提写专业学术论文",
    icon: "el-icon-reading",
    iconClass: "icon-blue",
    category: "学术"
  },
  {
    title: "朋友圈",
    path: "friend",
    showInput: true,
    description: "精心设计的朋友圈文案",
    icon: "el-icon-document-checked",
    iconClass: "icon-green",
    category: "社交"
  },
  {
    title: "其他",
    path: "others",
    showInput: true,
    description: "更多写作类型支持",
    icon: "el-icon-more",
    iconClass: "icon-orange",
    category: "其他"
  }
];

const showCopywritingInput = ref(false);
const targetAudience = ref('');
const product = ref('');
const blogger = ref('');
const bloggerTopic = ref('');
const title = ref('');
const degree = ref('');
const style = ref('');
const people1 = ref('');
const people2 = ref('');
const scene = ref('');
const redbookTopic = ref('');
const friendTopic = ref('');
const promptText = ref("帮我写 5 个面向");
const currentCategory = ref(''); // 当前选中的类别
const categories = ['全部', ...new Set(writingTypes.map(type => type.category))];
const activeCategory = ref('全部'); // 默认选中的分类
const generatedContent = ref(''); // 存储生成的内容
const isGenerated = ref(false); // 控制是否显示生成内容

// 计算属性：根据活动分类返回要显示的写作类型
const displayedWritingTypes = computed(() => {
  if (activeCategory.value === '全部') {
    return writingTypes; // 显示所有写作类型
  }
  return writingTypes.filter(type => type.category === activeCategory.value);
});

// 设置活动分类
const setActiveCategory = (category) => {
  activeCategory.value = category;
  showCopywritingInput.value = category !== '论文'; // 论文不显示输入框
};

const selectWritingType = (type) => {
  if (type.title === '论文') {
    router.push({ name: 'PaperWriting' }); // 跳转到 Paper.vue  
  } else {
    currentCategory.value = type.path; // 设置当前类别
    showCopywritingInput.value = true; // 显示输入框
  }
};

const setPromptText = (category) => {
  switch (category) {
    case 'copywriting':
      promptText.value = "帮我写 5 个面向";
      break;
    case 'article':
      promptText.value = "帮我写一篇关于";
      break;
    case 'composition':
      promptText.value = "帮我写一篇关于";
      break;
    case 'script':
      promptText.value = "帮我写一段";
      break;
    case 'research':
      promptText.value = "帮我写一篇深度研究报告，内容包括";
      break;
    case 'report':
      promptText.value = "帮我写一篇工作汇报，内容包括";
      break;
    default:
      promptText.value = "帮我写一篇";
  }
};

const handleTargetInput = (event) => {
  targetAudience.value = event.target.innerText;
};

const handleProductInput = (event) => {
  product.value = event.target.innerText;
};

const handleBloggerInput = (event) => {
  blogger.value = event.target.innerText;
};

const handleBloggerTopicInput = (event) => {
  bloggerTopic.value = event.target.innerText;
};

const handleTitleInput = (event) => {
  title.value = event.target.innerText;
};

const handleDegreeInput = (event) => {
  degree.value = event.target.innerText;
};

const handleStyleInput = (event) => {
  style.value = event.target.innerText;
};

const handlePeople1Input = (event) => {
  people1.value = event.target.innerText;
};

const handlePeople2Input = (event) => {
  people2.value = event.target.innerText;
};

const handleSceneInput = (event) => {
  scene.value = event.target.innerText;
};

const handleRedbookTopicInput = (event) => {
  redbookTopic.value = event.target.innerText;
};

const handleFriendTopicInput = (event) => {
  friendTopic.value = event.target.innerText;
};

const handleFocus = (event) => {
  if (event.target.innerText === event.target.getAttribute('data-placeholder')) {
    event.target.innerText = '';
  }
};

const handleBlur = (event) => {
  if (event.target.innerText.trim() === '') {
    event.target.innerText = event.target.getAttribute('data-placeholder');
  }
};

const generateWriting = async () => {
  // 获取当前写作类别
  const category = currentCategory.value;

  // 获取内容
  let content = '';
  switch (category) {
    case 'copywriting':
      if (!targetAudience.value || !product.value) {
        alert('请修改蓝色区域的内容！');
        return;
      }
      content = `帮我写 5 个面向${targetAudience.value}宣传${product.value}的品牌营销slogan，简洁吸睛，富有创意。`;
      break;
    case 'article':
      content = `我是一个${blogger.value || '博主'}，请帮我写一篇关于${bloggerTopic.value || '主题'}的文章。`;
      break;
    case 'composition':
      if (!title.value || !degree.value || !style.value) {
        alert('请修改蓝色区域的内容！');
        return;
      }
      content = `写一篇作文，主题为${title.value || '【这里输入作文题目】'}，作文水平位${degree.value || '高中'}，文体是${style.value || '议论文'}。`;
      break;
    case 'script':
      if (!people1.value || !people2.value || !scene.value) {
        alert('请修改蓝色区域的内容！');
        return;
      }
      content = `我是一名${people1.value || '打工人'}，帮我写一段面向${people2.value || '陌生同事'}的话术内容。不要太长，用于${scene.value || '【使用场景】'}。`;
      break;
    case 'redbook':
      if (!redbookTopic.value) {
        alert('请修改蓝色区域的内容！');
        return;
      }
      content = `帮我生成一篇关于${redbookTopic.value || '主题'}的小红书文案。`;
      break;
    case 'friend':
      if (!friendTopic.value) {
        alert('请修改蓝色区域的内容！');
        return;
      }
      content = `帮我生成一篇关于${friendTopic.value || '主题'}的朋友圈。`;
      break;
    default:
      content = '请选择一个分类';
  }

  // 打印生成的内容
  console.log('发送的文本内容:', content);

  // 调用 generateContent 接口
  try {
    const response = await generateContent({ text: content });
    console.log(response);
    generatedContent.value = response.msg; // 更新生成的内容
    isGenerated.value = true; // 显示生成的内容
  } catch (error) {
    console.error('请求失败', error);
    alert('文案生成失败，请重试');
  }
};

const goBack = () => {
  isGenerated.value = false; // 返回输入界面
};
</script>

<style scoped>
.ai-writing {
  padding: 20px;
  background-color: #f9f9f9;
  /* 背景色 */
  min-height: 100vh;
  /* 确保页面高度 */
}

.container {
  max-width: 1200px;
  margin: 0 auto;
}

h1 {
  font-size: 24px;
  color: #333;
  margin: 20px 0 10px;
}

p {
  color: #666;
  margin-bottom: 30px;
}

/* 分类导航样式 */
.category-nav {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

.nav-item {
  padding: 10px 20px;
  /* 增加内边距 */
  cursor: pointer;
  border-radius: 25px;
  /* 圆角 */
  font-size: 16px;
  /* 字体大小 */
  color: #666;
  background-color: #fff;
  /* 背景色 */
  transition: background-color 0.3s, color 0.3s;
  /* 过渡效果 */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  /* 阴影效果 */
}

.nav-item.active {
  background: #409EFF;
  /* 活动状态背景色 */
  color: white;
  /* 活动状态字体颜色 */
}

/* 写作类型网格样式 */
.writing-types {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  /* 网格布局 */
  gap: 20px;
  padding: 20px 0;
}

.writing-card {
  background: white;
  border-radius: 12px;
  padding: 20px;
  cursor: pointer;
  border: 1px solid #eee;
  transition: transform 0.3s, box-shadow 0.3s;
  /* 过渡效果 */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  /* 阴影效果 */
}

.writing-card:hover {
  transform: translateY(-2px);
  /* 悬停效果 */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  /* 悬停阴影 */
}

.card-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: white;
}

.card-content {
  flex: 1;
}

.card-content h3 {
  font-size: 16px;
  /* 增加标题字体大小 */
  margin: 5px 0 5px;
  color: #333;
}

.card-content p {
  font-size: 14px;
  /* 增加描述字体大小 */
  color: #999;
  margin: 0;
}

/* 图标背景颜色类 */
.icon-blue {
  background: #409EFF;
}

.icon-green {
  background: #67C23A;
}

.icon-orange {
  background: #E6A23C;
}

.icon-red {
  background: #F56C6C;
}

.icon-purple {
  background: #909399;
}

/* 输入框容器样式保持不变 */
.copywriting-input-container {
  position: fixed;
  bottom: 0;
  width: 100%;
  padding: 20px;
  background: #fff;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  /* 增加阴影 */
  border-top: 1px solid #eee;
  /* 顶部边框 */
}

.input-box {
  max-width: 800px;
  margin: 0 auto;
}

.editable-text {
  background: white;
  padding: 15px;
  border-radius: 8px;
  border: 1px solid #dcdfe6;
  margin-bottom: 10px;
  line-height: 1.5;
  font-size: 16px;
}

.input-placeholder {
  display: inline-block;
  min-width: 40px;
  padding: 2px 8px;
  margin: 0 4px;
  background: #ecf5ff;
  color: #409EFF;
  border-radius: 4px;
  outline: none;
  cursor: text;
}

.input-placeholder:empty::before {
  content: attr(data-placeholder);
  color: #409EFF;
  opacity: 0.8;
}

.input-placeholder:focus {
  background: #d9ecff;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}

.copywriting-button {
  width: 100%;
  padding: 10px 20px;
  /* 增加按钮内边距 */
  background-color: #409EFF;
  /* 按钮背景色 */
  color: white;
  /* 按钮字体颜色 */
  border: none;
  /* 去掉边框 */
  border-radius: 5px;
  /* 圆角 */
  cursor: pointer;
  /* 鼠标指针 */
  transition: background-color 0.3s;
  /* 过渡效果 */
}

.copywriting-button:hover {
  background-color: #66b1ff;
  /* 悬停状态背景色 */
}

.generated-content {
  margin-top: 20px;
  padding: 15px;
  background-color: #f0f0f0;
  /* 背景色 */
  border-radius: 8px;
  /* 圆角 */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  /* 阴影效果 */
}

.back-button {
  margin-top: 10px;
  padding: 10px 20px;
  background-color: #409EFF;
  /* 按钮背景色 */
  color: white;
  /* 按钮字体颜色 */
  border: none;
  /* 去掉边框 */
  border-radius: 5px;
  /* 圆角 */
  cursor: pointer;
  /* 鼠标指针 */
}

@media (max-width: 768px) {
  .writing-types {
    grid-template-columns: 1fr;
  }

  .category-nav {
    overflow-x: auto;
    white-space: nowrap;
    padding-bottom: 10px;
  }
}
</style>
